<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<!--
		
	        Step #4
	        	- 단계2, 3단계를 합해서 두 개를 동시에 움직이기(10분)
	                
			Step #3
				- 배너 하나를 아래에서 출력 영역으로 움직여보기(10분)
			            
			Step #2
				- 배너 하나를 위쪽으로 움직여보기(10분)
		
			Step #1
				- 배너 구조 잡기(1시간)
		
	-->
	<style>
		#banner_container{
			position:relative;
			width:128px;
			
			height:128px;
			border:1px solid #cccccc;
			top:100px;
			left:100px;
			
			overflow:hidden;
		}
		
		#banner_container div{
			position:absolute;
			width:128px;
			height:128px;
			
			top:0;
			background:#ffffff;
		}
	</style>
	
	<script>   
	
		var bannerContainer;
		var currentBanner;
		var nextBanner;
		var nY1;
		var nY2;
		window.onload=function(){	
			// bannerContainer 찾기.
			this.bannerContainer = document.getElementById("banner_container");		
			// banner중 0번째 배너를  구한다. (현재 배너)
			this.currentBanner = this.bannerContainer.getElementsByTagName("div")[0];
			// banner중 1번째 배너를  구한다. (다음 배너)
			this.nextBanner	= this.bannerContainer.getElementsByTagName("div")[1];
				
				
			// 위치 설정하기. 				
			this.nY1 = 0;
			this.nY2 = 128;	
			this.currentBanner.style.top = this.nY1+"px";	
			this.nextBanner.style.top = this.nY2+"px";	
			
			
			// 타이머에 의해서 배너들이 움직이기(롤링) 시작합니다.
			var nTimerID = setInterval(function(){
				// 위치를 -2만큼씩 감소시킵니다.
				nY1 -= 2;
				nY2 -= 2;
			
				if(nY2<0)		// 가상위치값이 top=0위치에 도달았다면 동작을 멈춰야겠죠? 
					clearInterval(nTimerID);
					
				// 현재 배너 이동.	
				currentBanner.style.top = nY1+"px";		
				// 다음 배너 이동.
				nextBanner.style.top = nY2+"px";						
			},100);	
		}	
		
	</script>

</head>

<body>
	<div id="banner_container" >
		<div>
			<img src="images/img1.jpg">
		</div>
		<div>
			<img src="images/img2.jpg">
		</div>
	</div>    
</body>
</html>



